<template>
  <el-date-picker
      v-if="item.domDate"
      v-model="localValue"
      v-bind="item"
      :type="item.domType"
      style="width: 100%"
      :value-format="item.domFormat"
      :placeholder="item.placeholder"
      @change="handleChange"
  />
  <el-radio-group @change="handleChange" v-else-if="item.selectDom == 4" v-model="localValue" v-bind="item">
    <!-- 修正 v-for 语法并添加 :key 绑定 -->
    <el-radio
        v-for="(obj, index) in item.options"
        :key="obj.id || index"
        :label="obj.value"
        :value="obj.value"
    >{{obj.label}}</el-radio>
  </el-radio-group>
  <el-checkbox-group @change="handleChange" v-else-if="item.selectDom == 5" v-model="localValue" v-bind="item">
    <el-checkbox
        v-for="(obj, index) in item.options"
        :key="index"
        :label="obj.label"
        :value="obj.value"
    > </el-checkbox>
  </el-checkbox-group>
  <el-select @change="handleChange" style="width: 100%" v-else-if="item.options" v-model="localValue" v-bind="item">
    <el-option
        v-for="(obj, index) in item.options"
        :key="obj.id || index"
        :label="obj.label"
        :value="obj.value"
    ></el-option>
  </el-select>
  <span v-else>
    {{ item.selectDom }}-未开发
  </span>
</template>

<script>
export default {
  name: 'olSelectDom',
  props: {
    modelValue: {
      required: true
    },
    item: {
      required: true
    }
  },
  data() {
    return {
      localValue: this.modelValue
    };
  },
  watch: {
    modelValue(newValue) {
      this.localValue = newValue;
    }
  },
  methods: {
    handleChange(newValue) {
      this.localValue = newValue;
      this.$emit('update:modelValue', newValue);
      this.$emit('updateOk', newValue);
    }
  }
};
</script>
